<template>
  <div class="wrap">
    <img src="../../static/img/header-logo.jpg"
         width="100%"
         alt="学校logo">
    <flow>
      <flow-state state="1"
                  is-done
                  title="核对">
      </flow-state>
      <flow-line tip="进行中"></flow-line>
      <flow-state state="2"
                  title="填写"></flow-state>
      <flow-line></flow-line>
      <flow-state state="3"
                  title="复核"></flow-state>
      <flow-line></flow-line>
      <flow-state state="4"
                  title="提交"></flow-state>
      <flow-line></flow-line>
      <flow-state state="5"
                  title="服务台确认"></flow-state>
      <flow-line></flow-line>
      <flow-state state="6"
                  title="完成"></flow-state>
    </flow>
    <p class="title">确认您的个人信息</p>
    <group class="box"
           gutter="0">
      <x-input v-for="(input,index) in group"
               disabled
               label-width="90px"
               :key="index"
               :title="input.title"
               :value="input.value"></x-input>
      <x-input disabled
               style="height: 5px;"></x-input>
      <flexbox style="margin: 0 auto 30px;">
        <flexbox-item>
          <x-button @click.native="goBack">上一步</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button @click.native="toNext">下一步</x-button>
        </flexbox-item>
      </flexbox>
    </group>
    <p class="copyright">技术支持&copy;三月软件小组</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      group: [
        {
          title: "姓名",
          placeholder: "",
          value: ""
        },
        {
          title: "身份证",
          placeholder: "",
          value: ""
        },
        {
          title: "性别",
          placeholder: "",
          value: ""
        },
        {
          title: "班级",
          placeholder: "",
          value: ""
        },
        {
          title: "学院",
          placeholder: "",
          value: ""
        },
        {
          title: "专业",
          placeholder: "",
          value: ""
        }
      ]
    };
  },
  mounted: function() {
    let _this = this;
    let studata = JSON.parse(window.localStorage.getItem("student"));
    if (studata == null) {
      _this.$router.push("/students/register");
    } else {
      _this.group[0].value = studata.name;
      _this.group[1].value = studata.card_id;
      _this.group[2].value = studata.sex;
      _this.group[3].value = studata.classes;
      _this.group[4].value = studata.academy;
      _this.group[5].value = studata.major;
    }
  },
  methods: {
    goBack() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/students/register");
      }, 300);
    },
    toNext() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/students/setInfo");
      }, 300);
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  background: linear-gradient(#fff, #afd0e4);
}
.title {
  font-size: 1.2em;
  letter-spacing: 3px;
  text-align: center;
  margin: 15px 0;
}
.box {
  margin: 0 15px;
  box-shadow: 0px 5px 18px #b3acac87;
  div {
    height: 40px;
    color: rgb(102, 102, 102);
  }
}
.weui-btn {
  background: rgb(0, 160, 233);
  color: #fff;
  width: 100px;
  border-radius: 2px;
  cursor: pointer;
}
.copyright {
  font-size: 11px;
  padding: 15px 0;
  text-align: center;
}
.weui-wepay-flow,
.weui-wepay-flow-auto {
  padding: 18px 25px 23px;
}
</style>

